<template>
  <div class="toadd">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <h3>添加商品信息</h3>
    <!-- 步骤条 -->
    <el-steps class="mt-15" style="margin-left:15px" :active="activeNum" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <!-- tab栏 -->
    <el-tabs :tab-position="'left'" @tab-click="currentTab" style="margin-top:15px">
      <el-tab-pane label="基本信息">
        <el-form ref="infoForm" :rules="rules" :model="infoForm" label-width="80px">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="infoForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="infoForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="infoForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="infoForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
             <el-cascader
              :options="options"
              v-model="selectedOptions"
              :props="defaultProps"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="是否促销">
            <el-radio v-model="radio" @change="radioChange" label="1" border size="medium">是</el-radio>
            <el-radio v-model="radio" @change="radioChange" label="0" border size="medium">否</el-radio>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数">
         <el-form label-width="80px">
           <el-form-item label="版式">
            <el-checkbox v-model="checked" label="备选项1" border size="medium" v-for="(item,index) in goodsParams" :key="index">{{item}}
            </el-checkbox>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品属性">
        <el-form ref="attrForm" label-width="130px">
          <el-form-item :label="item.attr_name" v-for="(item,index) in attrForm" :key="index">
            <el-input v-model="item.attr_vals"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品图片">定时任务补偿</el-tab-pane>
      <el-tab-pane label="商品内容">定时任务补偿</el-tab-pane>
    </el-tabs>
    <div class="button-box">
      <el-button>取消</el-button>
      <el-button type="primary" @click="handleAddGoods">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getGoodsCategories, postAddGoods, getCatAttributes } from '@/api'
export default {
  data () {
    return {
      activeNum: 0, // tab栏索引
      infoForm: { goods_name: '', goods_price: '', goods_weight: '', goods_number: '', goods_cat: '' },
      options: [],
      selectedOptions: [],
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      radio: '1',
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: 'blur' }
        ]
      },
      checked: true,
      goodsParams: [],
      attrForm: []
    }
  },
  created () {
    getGoodsCategories(3).then(res => {
      this.options = res.data
    })
  },
  methods: {
    // tab被选择时触发,改变步骤条
    currentTab (obj) {
      // console.log(obj)
      this.activeNum = +obj.index
      // 判断如果没有选中商品分类
      if (this.activeNum >= 1 && this.infoForm.goods_cat === '') {
        this.$message.error('必须选中商品分类')
        return
      }
      // 判断选中的是商品参数
      if (this.activeNum === 1) {
        console.log(this.infoForm.goods_cat[this.infoForm.goods_cat.length - 1])
        getCatAttributes(this.infoForm.goods_cat[this.infoForm.goods_cat.length - 1], 'many').then(res => {
          // console.log(res)
          if (res.meta.status === 200 && res.data.length !== 0) {
            let temp = res.data[0].attr_vals
            this.goodsParams = ''
            this.goodsParams = temp.split(',')
            // console.log(this.goodsParams)
          }
        })
      }
      // 判断选中的是商品属性
      if (this.activeNum === 2) {
        getCatAttributes(this.infoForm.goods_cat[this.infoForm.goods_cat.length - 1], 'only').then(res => {
          console.log(res)
          this.attrForm = res.data
        })
      }
    },
    // 级联选择器触发函数
    handleChange (value) {
      console.log(value)
      this.infoForm.goods_cat = value
    },
    // 单选框选择时触发
    radioChange (value) {
      console.log(value)
    },
    // 添加商品
    handleAddGoods () {
      if (!this.infoForm.goods_cat) {
        this.$message.error('请选择商品分类')
        return
      }
      postAddGoods(this.infoForm).then(res => {
        console.log(res)
        if (res.meta.status === 201) {
          this.$message({
            message: '添加商品成功',
            type: 'success',
            duration: 1000
          })
          setTimeout(() => {
            this.$router.push('/goods')
          }, 1000)
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
h3{
  height: 45px;
    line-height: 45px;
    background-color: #D7E2EF;
    padding-left: 20px;
    font-size: 15px;
}
.button-box{
  text-align: center;
}
</style>
